<template>
  <div
    ref="pie"
    class="pie"
  >
  </div>
</template>

<script>
export default {
  name: 'Pie',
  props: {
    'data': {
      type: Array
    },
    'color': {
      type: Array
    },
    'title': {
      type: String
    },
    'pieSize': {
      type: Object,
      default () {
        return {
          radius: ['55%', '70%'],
          center: ['50%', '42%'],
          title: {
            top: 62,
            left: 'center',
            fontSize: 18
          }
        }
      }
    },
    'legendShow': {
      type: Boolean,
      default: true
    }
  },
  watch: {
    'data': {
      deep: true,
      handler: function () {
        this.draw()
      }
    }
  },
  computed: {
    dataName () {
      const arr = this.data.map((item, index) => {
        return item.name
      })
      return arr
    }
  },
  mounted () {
    this.draw()
    this.$common.winResize(this.$echarts.init(this.$refs.pie))
  },
  methods: {
    draw () {
      const $pie = this.$echarts.init(this.$refs.pie)
      const option = {
        title: {
          text: this.title,
          top: this.pieSize.title.top,
          left: 'center',
          textStyle: {
            color: '#4dd5ff',
            fontSize: this.pieSize.title.fontSize
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(7, 23, 71, .8)',
          padding: 10,
          borderColor: '#2c76c0',
          borderWidth: 1,
          textStyle: {
            color: '#45beed'
          }
        },
        legend: {
          show: this.legendShow,
          orient: 'horizontal',
          x: 'center',
          y: 'bottom',
          itemWidth: 10,
          itemHeight: 7,
          padding: [0, 0, 10, 0],
          textStyle: {
            color: '#5676a9',
            fontSize: 12
          },
          data: this.dataName
        },
        series: {
          type: 'pie',
          data: this.data,
          radius: this.pieSize.radius,
          center: this.pieSize.center,
          selectedMode: 'single',
          hoverOffset: 2,
          selectedOffset: 5,
          clockwise: true,
          color: this.color,
          label: {
            normal: {
              textStyle: {
                fontSize: 12
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: '#587395'
              },
              length: 2
            }
          }
        }
      }
      $pie.setOption(option, true)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .pie
    width: 100%
    height: 100%
</style>
